<template>
	<div>
		<!-- 电话搜索 -->
		<header class="header">
			<a-form class="formList" layout="inline">
				<a-form-item label="手机号">
					<a-input v-model:value="formCount.phone"/>
				</a-form-item>
				<a-form-item>
					<a-button type="danger" @click="phoneSearch">查询</a-button>
				</a-form-item>
			</a-form>
		</header>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
			<tr>
				<th>手机号</th>
				<th>验证码</th>
				<th>类型</th>
				<th>状态</th>
				<th>发送时间</th>
			</tr>
			</tbody>
			<tbody>
			<tr v-for="(item,index) in allResourcesData" :key="index">
				<td>{{ item.phone }}</td>
				<td>{{ item.code }}</td>
				<td>{{ item.type }}</td>
				<td>
					<span v-if="item.status==1" style="color: #00CC00;">成功</span>
					<span v-else style="color: #f60;">失败</span>
				</td>
				<td>{{ item.create_time }}</td>
			</tr>
			</tbody>
		</table>
		<!-- 分页 -->
		<div  class="padding-t-20">
			<a-pagination
				:pageSize="formCount.pageSize"
				:current="formCount.page"
				:total="formCount.count"
				@change="clickPage"
				:pageSizeOptions="pageSizeOptions"
				show-size-changer
				@showSizeChange="onShowSizeChange"
				show-quick-jumper
			/>
		</div>
	</div>
</template>

<script>
import rizhiApi from '../../api/rizhi.js'

export default {
	data() {
		return {
			allResourcesData: [],
			// 分页
			pageSizeOptions: ['20', '50', '100', '150'],
			formCount: {
				count: '',
				page: 1,
				pageSize: 20,
				user_name: '',
				phone: '',
				type: '',
			},
		}
	},
	mounted() {
		this.memberList()
	},
	methods: {
		memberList() {
			this.phoneSearch()
		},
		// 分页
		clickPage(e) {
			this.formCount.page = e;
			this.memberList();
		},
		onShowSizeChange(current, pageSize) {
			this.formCount.pageSize = pageSize;
			this.formCount.page = 1;
			this.memberList();
		},
		// 手机号查询
		phoneSearch() {
			rizhiApi.getSmsLog(this.formCount.page, this.formCount.pageSize, this.formCount.phone).then((res) => {
				if (res.status == 1) {
					this.showPhone = false
					this.allResourcesData = res.result.data;
					this.formCount.count = res.result.count;
				}
			})
		}
	},
}
</script>

<style>
</style>